<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>

<style>
  #slide {
    position: relative;
    width: 100%;
    height: 650px;
  }

  #slide li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 3s;
  }

  #slide li.active {
    opacity: 1;
  }
</style>

<body>
  <div id="store">
    <div class="div_header" style="background: url(../img/瑞成捕获.JPG);">
      <div style="width: 100%;height: 100%;">
        <header>
          <div style="display: flex; padding-top: 2%; padding-left: 3%;">
            <div style="flex: 1;">
              <div style="display: flex; padding-left: 5%;">
                <img src="../img/logo3.png" width="150px" alt="">
                <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
              </div>
            </div>
            <div class="div_header_div_ul">
              <div style="width: 80%;margin-top: 1.5%;">
                <ul style="display: flex;">
                  <li><a href="./home.html">首页</a></li>
                  <li><a href="./Century-old_brand.html">百年品牌</a></li>
                  <li><a href="./Brand_strength.html">品牌实力</a></li>
                  <li><a href="./cooperation.html">特许合作</a></li>
                  <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                  <li><a href="./Store_navigation.html">门店导航</a></li>
                  <li><a href="./contact.html">联系我们</a></li>
                  <li><a href="./message.html">留言</a></li>
                  <li id="li_1"><a href="./login.html">登录/注册</a></li>
                  <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
                </ul>
              </div>
              <div style="margin-top: 1.5%;">
                <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;"
                  id="name">
                <button style="border: 0;padding: 3px 5px;background-color: #fff;" onclick="search()">搜索</button>
              </div>
            </div>
          </div>
        </header>
        <!-- 大图片 -->
        <section>
          <div class="store_div_header" style="padding-left: 45%;padding-top: 10%;">
            <img src="../img/slogan_shop.png" alt="">
          </div>
        </section>
      </div>
      <!-- 门店 -->
      <section class="store_one_sec" style="background-color: #18198f;">
        <div class="container store_one_div">
          <ul id="slide">
            <li class="active">
              <div style="width: 100%; display: flex;padding: 5% 0;">
                <div style="width: 60%;">
                  <img src="../img/ms1.jpg" width="100%" height="500px" alt="">
                </div>
                <div style="width: 40%;background-color: #fff; padding: 5%;">
                  <h4 style="margin-bottom: 5px; color: #17198f;">瑞成火锅（四川一店）</h4>
                  <span>锦江区东升街1号（近耿家巷）</span>
                  <hr style="width: 80%;">
                  <span>联系电话：123456789</span><br>
                  <span>营业事件：9点30至02点</span><br>
                  <button
                    style="border: 0; background-color: #18198f; padding: 5px 20px; border-radius: 20px;color: #fff;font-size: 14px; margin-top: 5%;">点击查看</button>
                </div>
              </div>
            </li>
            <li>
              <div style="width: 100%; display: flex;padding: 5% 0;">
                <div style="width: 60%;">
                  <img src="../img/sn2.JPG" width="100%" height="500px" alt="">
                </div>
                <div style="width: 40%;background-color: #fff; padding: 5%;">
                  <h4 style="margin-bottom: 5px; color: #17198f;">瑞成火锅（四川二店）</h4>
                  <span>锦江区东升街2号（近耿家巷，春熙路）</span>
                  <hr style="width: 80%;">
                  <span>联系电话：13212345678</span><br>
                  <span>营业事件：10点30至02点</span><br>
                  <button
                    style="border: 0; background-color: #18198f; padding: 5px 20px; border-radius: 20px;color: #fff;font-size: 14px; margin-top: 5%;">点击查看</button>
                </div>
              </div>
            </li>
            <li>
              <div style="width: 100%; display: flex;padding: 5% 0;">
                <div style="width: 60%;">
                  <img src="../img/ms2.jpg" width="100%" height="500px" alt="">
                </div>
                <div style="width: 40%;background-color: #fff; padding: 5%;">
                  <h4 style="margin-bottom: 5px; color: #17198f;">瑞成火锅（四川三店）</h4>
                  <span>锦江区东升街3号（近耿家巷，春熙路，太古里）</span>
                  <hr style="width: 80%;">
                  <span>13412345678</span><br>
                  <span>营业事件：9点30至01点</span><br>
                  <button
                    style="border: 0; background-color: #18198f; padding: 5px 20px; border-radius: 20px;color: #fff;font-size: 14px; margin-top: 5%;">点击查看</button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <!-- 地址 -->
      <section class="store_two_sec" style="background-color: #18198f;color: #fff;overflow: hidden;padding-top: 3%;">
        <div class="container">
          <div style="display: flex; color: #fff;">
            <div class="store_two_sec_div1" style="width: 35%; margin: auto; text-align: right;">
              <h1 style="font-weight: 700;">300+全国分店</h1>
            </div>
            <div class="store_two_sec_div2" style="width: 40%; margin: auto; text-align: left;">
              <h1 style="font-weight: 700;">30+海外分店正在筹备中</h1>
            </div>
          </div>
          <div style="display: flex; margin-top: 5%;">
            <div class="store_two_sec_div3" style="width: 40%; padding-top: 25%;">
              <h4 style="color: #e6b292;">瑞成火锅</h4>
              <h4 style="color: #e6b292;">传承世家文化 品味火锅风情</h4>
              <span style="font-size: 14px;">
                重庆瑞成火锅以“世家文化”为主题，将大气端方的传统世家元素融入现代化室内设计手法，在做到极美的视觉效果的同时，
                也兼顾顾客的用餐体验。呈现出既现代又古典、新旧交融碰撞的哲学派室内设计风格。
              </span>
            </div>
            <div class="store_two_sec_div4">
              <img src="../img/map.png" alt="">
            </div>
          </div>
        </div>
      </section>
      <!-- 页尾 -->
      <footer style="background-color: #000; padding: 3% 15%;">
        <div style="display: flex;">
          <div style="display: flex; width: 80%; flex-wrap: wrap;">
            <h6 class="footer_h6">首页</h6>
            <h6 class="footer_h6">百年品牌</h6>
            <h6 class="footer_h6">品牌实力</h6>
            <h6 class="footer_h6">特许合作</h6>
            <h6 class="footer_h6">传奇菜品</h6>
            <h6 class="footer_h6">门店导航</h6>
            <h6 class="footer_h6">联系我们</h6>
            <div style="width: 100%;padding-left: 3%;">
              <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
              <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
              <span class="footer_span">风险提示：投资有风险，请理性选择</span>
            </div>
          </div>
          <div>
            <img src="../img/erweima.jpg" width="150px" alt="">
          </div>
        </div>
      </footer>
    </div>
  </div>
</body>
<script>
  // 轮播图
  let slide = document.getElementById('slide');
  let slideList = slide.querySelectorAll('li');
  let node = null;
  let index = 0;
  let timer = setInterval(function () {
    if (node != null) node.className = "";
    index = index >= slideList.length - 1 ? 0 : index + 1;
    slideList[index].className = "active";
    node = slideList[index];
  }, 3000)
  // --------------
  const inter1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.store_div_header', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter1.observe(document.querySelector('.store_div_header'))

  const inter2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.store_one_div', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter2.observe(document.querySelector('.store_one_sec'))

  const inter3 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.store_two_sec_div1', { duration: 1, opacity: 0 })
    t1.from('.store_two_sec_div2', { duration: 1, opacity: 0 })
    t1.from('.store_two_sec_div3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.store_two_sec_div4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter3.observe(document.querySelector('.store_two_sec'))
</script>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  function search() {
    const name = document.getElementById("name").value;
    localStorage.setItem("name",name);
    window.location.href = './shop.html'
  }
</script>
</html>